<template>
  <a-card :bordered="false" class="card-area">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-form-item label="流程名称" >
          <a-input autocomplete="off"  v-model="queryParam.processName.value"></a-input>
        </a-form-item>
        <a-form-item label="机构" >
          <AkTreeSelect :url="sysDepartUrl.tree"  v-model="queryParam.tenantId.value"
                         :allowClean="true" :defaultFirst="true" @change="loadData"/>

        </a-form-item>
        <a-form-item label="模型" v-if="!!queryParam.tenantId.value">
          <ak-select-tag :url="`${activitModelUrl.named}?tenantId=${queryParam.tenantId.value}`" v-model="queryParam.modelId.value"></ak-select-tag>
        </a-form-item>
        <a-form-item label="任务名称">
          <a-input autocomplete="off"  v-model="queryParam.taskName.value"></a-input>
        </a-form-item>
        <a-form-item label="用户">
          <AkSelectTag :url="`${sysUserUrl.named}?columns=username,realname&keyField=username`" autocomplete="off"  v-model="queryParam.username.value"></AkSelectTag>
        </a-form-item>
        <a-form-item>
              <span  class="table-page-search-submitButtons">
                 <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" >重置</a-button>
              </span>
        </a-form-item>
      </a-form>
    </div>


    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        :rowKey="(r)=>r.id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="ellipsis" slot-scope="text">
          <ak-ellipsis :value="text"/>
        </span>
        <template slot="flowImg" slot-scope="text, record">
          <AkImgPreview :url="concatUrl(appApiBaseUrl,url.getFlowImg)+'?id='+record.id"/>
        </template>

        <span slot="action" slot-scope="text, record"  class="table-operator">
                    <!-- 运行中的任务不能删除 -->
          <!-- <a @click="handleDelete(record.id)">删除</a> -->
          <a @click="handleDelegate(record)">委派</a>
          <a @click="handleDetail(record)">明细</a>
          <a @click="handleFinish(record)">完成</a>
        </span>
      </a-table>
    </div>
    <a-modal title="任务委派,选择委派人" :visible="delegateParams.show" :confirm-loading="delegateParams.confirmLoading"
      @ok="doHandleDelegate" @cancel="()=>delegateParams.show=false">
      <AkSelectTag :url="`${sysUserUrl.named}?columns=username,realname&keyField=username`"  v-model="delegateParams.userId"
                    :allowClean="true" style="width: 100%"/>
    </a-modal>
    <ProcessDetailModel ref="modalForm" @ok="modalFormOk"></ProcessDetailModel>
    <a-modal v-model="finishParam.show" title="任务表单" :confirmLoading="finishParam.confirmLoading"
             :forceRender="true"
             @cancel="()=>finishParam.show=false" @ok="haneleFinishOk"
             width="80%" :mast="false">
      <FormIframe ref="formIframeRef" :buttonShow="false"></FormIframe>
    </a-modal>

  </a-card>
</template>

<script>
    import AkfhListMixin from '../../mixin/AkfhListMixin';
    import ProcessDetailModel from './modal/ProcessDetailModal'
    import {appApiBaseUrl} from '../../config/constant.config'
    import {activitModelUrl, sysDepartUrl, activitiTaskUrl, SysUserUrl,
      activitiProcessInstanceUrl, activitiFormUrl} from '../../api/url';
    import { filterObj, concatUrl } from '../../utils/util'
    import AkEllipsis from '../../components/akfh/AkEllipsis'
    import AkTreeSelect from '../../components/akfh/AkTreeSelect'
    import AkSelectTag from '../../components/akfh/AkSelectTag'
    import { getAction, postAction } from '../../api/manage'
    import qs from 'qs';
    import AkImgPreview from '../../components/akfh/file-preview/AkImgPreview'
    import { Modal } from 'ant-design-vue'
    import FormIframe from './modal/FormIframe'

    export default {
      name: 'MyTaskList',
      components: { FormIframe, AkImgPreview, AkTreeSelect, AkSelectTag,AkEllipsis, Modal, ProcessDetailModel},
      describe:'我的任务列表',
        mixins:[AkfhListMixin],
        data(){
          return {
            queryParam: {
              modelId: {
                column: 'modelId',
                type: 'eq',
                value: ''
              },
              tenantId:{
                column:'tenantId',
                type:'eq',
                value:''
              },
              processName:{
                column:'processDefinitionName',
                type:'like',
                value:''
              },
              taskName:{
                column:'taskName',
                type:'like',
                value:''
              },
              username:{
                column:'username',
                type:'eq',
                value:''
              },


            },
            columns:[
              {
                title: '#',
                dataIndex: '',
                key: 'rowIndex',
                width: 120,
                align: "center",
                customRender: function (t, r, index) {
                  return parseInt(index) + 1;
                }
              },
              {
                title: '任务名称',
                align: "center",
                dataIndex: 'name',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '任务描述',
                align: "center",
                dataIndex: 'description',
                scopedSlots: {customRender: 'ellipsis'},
              },

              {
                title: '任务紧急程度',
                align: "center",
                dataIndex: 'priority',
              },

              {
                title: '任务拥有人',
                align: "center",
                dataIndex: 'owner',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '任务执行人',
                align: "center",
                dataIndex: 'assigner',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '创建时间',
                align: "center",
                dataIndex: 'createTime',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '任务定义id',
                align: "center",
                dataIndex: 'taskDefinitionKey',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '到期时间',
                align: "center",
                dataIndex: 'dueDate',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '领取时间',
                align: "center",
                dataIndex: 'claimTime',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '是否挂起',
                align: "center",
                dataIndex: 'suspendedFlag_dictText',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '代理状态',
                align: "center",
                dataIndex: 'delegationState',
                scopedSlots: {customRender: 'ellipsis'},
              },

              {
                title: '操作',
                dataIndex: 'action',
                align: "center",
                scopedSlots: {customRender: 'action'},
              }
            ],
            delegateParams:{
              show:false,
              taskId:'',
              userId:'',
              confirmLoading:false,
            },
            finishParam: {
              show:false,
              taskId:'',
              confirmLoading:false,
              formData:{},
              taskData:{},
            },
            url:Object.assign({}, activitiTaskUrl),
            sysDepartUrl:sysDepartUrl,
            activitModelUrl:activitModelUrl,
            appApiBaseUrl:appApiBaseUrl,
            sysUserUrl:SysUserUrl,
            
          }

        },
        methods:{
          concatUrl,
          // 多租户设计
          beforeLoadData(){
            return !!this.queryParam.tenantId.value;
          },
          // 展示委派
          handleDelegate(record){
            this.delegateParams.show = true;
            this.delegateParams.taskId = record.id;
            this.delegateParams.userId = null;
            this.delegateParams.confirmLoading = false;
          },
          // 开始委派
          doHandleDelegate(){
            if(!this.delegateParams.userId){
              this.$message.warn("请秀安泽委派人");
              return;
            }
            this.delegateParams.confirmLoading = true;
            postAction(this.url.delegate, qs.stringify({taskId:this.delegateParams.taskId, userId:this.delegateParams.userId}))
              .then(res=>{
                if(res.success){
                  this.$message.success(res.message);
                  this.delegateParams.show = false;
                  this.loadData();
                }
              }).finally(()=>{
                this.delegateParams.confirmLoading = false;
            })
          },
          handleDetail:function(record){
            this.loading=true;
            getAction(activitiProcessInstanceUrl.findById, {id:record.processInstanceId})
              .then(res=>{
                if(res.success){
                  this.$refs.modalForm.title="详情";
                  this.$refs.modalForm.disableSubmit = true;
                  this.$refs.modalForm.edit(res.result);
                }
              }).finally(()=>{
                this.loading = false;
            })

          },

          // 任务完成表单展示
          handleFinish(record){
            this.loading = true;
            getAction(activitiFormUrl.getTaskFormInfo, {taskId:record.id})
              .then(res=>{
                if(res.success){
                  let formData = res.result;
                  if(formData.formKey || (formData.formProperties && formData.formProperties.length > 0)){
                    this.finishParam.taskId = record.id;
                    this.finishParam.confirmLoading = false;
                    this.finishParam.show = true;
                    this.finishParam.formData = res.result;
                    this.finishParam.taskData = record;
                    this.$refs.formIframeRef.loadData(res.result);
                  }else {
                    this.doHandleFinishOK(record, {});
                  }

                }
              }).finally(()=>{
                this.loading = false;
            })

          },
          // 发送完成
          doHandleFinishOK(taskData, formData = {}){
            this.finishParam.confirmLoading = true;
            let url = "";
            if(taskData.delegationState == 'PENDING'){
              url = this.url.resolve+"/"+taskData.id;
            }else {
              url = this.url.complate+"/"+taskData.id;
            }
            postAction(url, formData)
              .then(res=>{
                if(res.success){
                  this.$message.success(res.message);
                  this.loadData();
                }
              }).finally(()=>{
                this.finishParam.confirmLoading = false;
                this.finishParam.show = false;
            })
          },

          // 任务完成
          haneleFinishOk(){
            this.$refs.formIframeRef.getFormData()
              .then(res=>{
                  this.doHandleFinishOK(this.finishParam.taskData, res);
              })
          },
          // 非通过那个查询条件
          getQueryParams() {

            //获取查询条件
            let sqp = {};
            for (let queryParamKey in this.queryParam) {
              sqp[this.queryParam[queryParamKey]['column']] = this.queryParam[queryParamKey]['value']
            }
            sqp.pageNo = this.ipagination.current;
            sqp.pageSize = this.ipagination.pageSize;
            return filterObj(sqp);
          },

        }
    }
</script>

<style scoped>

</style>